<template>
  <div class="file-list">
    <el-upload
      action="/file"
      list-type="picture-card"
      :on-success="handleSuccess"
      :on-preview="handlePictureCardPreview"
      multiple
      :file-list="fileList"
      :limit="limit"
      :accept="accept"
      :class="{'btn-hide': fileIds.length === limit}"
      :on-exceed="onExceed"
      :on-remove="handleRemove">
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" :modal="false">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>
<script>
  export default {
    name: "multiFile",
    props: {
      value: {
        type: [String, Number, Array]
      },
      accept: {
        type: String,
        default: 'image/*'
      },
      limit: {
        type: Number
      },
      // handleSuccess: {
      //   type: Function,
      //   default: function (res, file, fileList) {
      //     if (res.code === 0) {
      //       const id = res.data
      //       this.fileIds.push(id + "")
      //       this.emitInput()
      //       this.$notify.success('文件：' + file.name + '上传成功！')
      //     } else {
      //       this.$notify.error('文件：' + file.name + '上传失败')
      //     }
      //   }
      // }
    },
    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false,
        fileList: [],
        fileIds: [],
      };
    },
    methods: {
      onExceed() {
        this.$notify.error({
          title: '失败',
          message: "你上传的文件不能超" + this.limit + "个"
        });
      },
      handleSuccess(res, file, fileList) {
          if (res.code === 0) {
            const id = res.data
            this.fileIds.push(id + "")
            this.emitInput()
            this.$emit('validate')
            this.$notify.success('文件：' + file.name + '上传成功！')
          } else {
            this.$notify.error('文件：' + file.name + '上传失败')
          }
      },
      handleRemove(file, fileList) {
        this.fileList = fileList
        let fileIds = this.fileIds
        fileIds.splice(fileIds.indexOf(file.id), 1);
        this.emitInput()
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      /**
       * 修改父组件value值
       */
      emitInput() {
        this.$emit('input', this.fileIds.join())
      },
      strToArray(val) {
        if (val) {
          let fileList = []
          if (typeof val === 'number') {
            this.fileIds.push(val + "")
            fileList.push({
              id: val,
              url: '/file/' + val
            })
          } else if (typeof val === 'object') {
            this.fileIds = val
            val.forEach(item => {
              fileList.push({
                id: item,
                url: '/file/' + item
              })
            })
          } else {
            this.fileIds = val.split(",")
            this.fileIds.forEach(item => {
              fileList.push({
                id: item,
                url: '/file/' + item
              })
            })
          }
          this.fileList = fileList
        } else {
          this.fileIds = []
          this.fileLis = []
        }
      }
    },
    watch: {
      value(val) {
        if (val !== this.fileIds.join()) {
          this.strToArray(val)
        }
      }
    },
    created() {
      this.strToArray(this.value)
    }
  }
</script>
<style lang="sass" scoped>
  .file-list
    width: 100%

</style>
